<template>
	<view class="sortDetail">
		<!-- 照片视频 -->
		<div class="photoVideo">
			<!-- 轮播 -->
			<!-- <u-icon class="return" @tap="back" name="arrow-left" size="28" color="#fff"></u-icon> -->

			<!-- 轮播 -->
			<u-swiper v-show="isActive === 0" :list="houseDetail.imgs_paths" @click="imageSelect(houseDetail.imgs_path)"
				:autoplay="false" height="380" mode="number" indicator-pos="bottomRight"></u-swiper>
			<!-- 视频 -->
			<video v-if="video_cover" @play="play" @pause="pause" v-show="isActive === 1" id="myVideo"
				:src="houseDetail.video_path[0]" :poster="video_cover">
				<!-- #ifndef H5 -->
				<cover-view class="return" style="color:#fff;font-size: 36rpx;" @click="changePhotoVideo(0)">←
				</cover-view>
				<!-- #endif -->
			</video>
		</div>
		<div class="flex row-center mt20 mb20">
			<div class="change" v-if="houseDetail.video_path && changShow && xcx_is_audit == 1">
				<div class="item video" :class="{ active: isActive === 1, active2: isActive == 1 }"
					@tap="changePhotoVideo(1)">{{ $t('视频') }}</div>
				<div class="item photo" :class="{ active: isActive === 0 }" @tap="changePhotoVideo(0)">{{ $t('图片') }}
				</div>
			</div>
		</div>
		<div class="content">
			<!-- 商品信息 -->
			<div class="productInfo">
				<div class="title">{{ houseDetail.title }}</div>
				<div class="price">
					<text class="about" v-if='houseDetail.type == 1'>{{ $t("约") }}</text>
					<text class="num">{{ houseDetail.price }}</text>
					<text v-if='houseDetail.type == 1' class="moon">{{ $t("万") }}</text>
					<text v-else-if='houseDetail.type == 2' class="moon">{{ $t("元") }}/m²</text>
					<text v-else-if='houseDetail.type == 3'
						class="moon">{{ houseDetail.price_unit ? $t(houseDetail.price_unit): $t("元/月") }}</text>
				</div>
			</div>
		
			<!-- 发布人信息 -->
			<div class="releasePeople">
				<div class="top" v-if="houseDetail.release_info.store_name">
					<image src="/static/icons/merchant.png" alt="" />
					<div class="store">{{ houseDetail.release_info.store_name }}</div>
				</div>

				<div class="conent">
					<div class="left">
						<image :src="houseDetail.release_info.avatar" mode="aspectFill" alt=""
							@click="$u.route('pages/mine/myFocus/focus-info', { id: houseDetail.release_info.id })" />
						<div class="info">
							<div class="title">
								<div class="name">{{ houseDetail.release_info.name }}</div>
								<div class="identify">{{ $t('发布人') }}</div>
							</div>

							<div class="time">{{ houseDetail.create_time }}</div>
						</div>
					</div>

					<div class="right">
						<u-button size="mini" type="primary" @click="attention(houseDetail.release_info.id)">{{
							houseDetail.is_follow === 0 ? $t('关注') : $t('取消关注')
						}}</u-button>
					</div>
				</div>
			</div>
			
			<!-- 商品详情 -->
			<div class="productDetail">
				<div class="item">
					<div class="title">{{ type === 3 ? $t('年限') : $t('房型') }}</div>
					<div class="info">
						{{ type === 3 ? houseDetail.planting_years : houseDetail.house_type_name }}
						<span v-show="type === 3">年</span>
					</div>
				</div>
				<div class="item">
					<div class="title">{{ $t('面积') }}</div>
					<div class="info">{{ houseDetail.total_area }}m²</div>
				</div>
				<div class="item" v-show="type === 2">
					<div class="title">{{ $t('朝向') }}</div>
					<div class="info">{{ houseDetail.orientation_name }}</div>
				</div>
				<div class="item">
					<div class="title">{{ $t('小区') }}</div>
					<div class="info">{{ houseDetail.house_name }}</div>
				</div>
			</div>
			<view class="transfer" v-if="houseDetail.house_jieshao">
				<text class="title">{{ $t('备注') }}</text>
				<view class="info">
					<text class="text" decode space="emsp">{{houseDetail.house_jieshao}}</text>
				</view>
			</view>
			<!-- 文件 -->
			<!-- <div v-if="type != 3" class="document">
				<span class="title">{{ $t('文件') }}</span>
				<div class="list">
					<div class="item" @click="downloadUpload('house_prove_file_path')">
						<div class="text" style="margin-right:20rpx">{{ $t('房产文件') }}</div>
						<image src="/static/icons/document.png" alt="" style="width:70rpx;height: 70rpx;" />
					</div>
					<div class="item" @click="downloadUpload('house_file_path')">
						<div class="text" style="margin-right:20rpx">{{ $t('房产证明文件') }}</div>
						<image src="/static/icons/document.png" alt="" style="width:70rpx;height: 70rpx;" />
					</div>
				</div>
			</div> -->
			<!-- 转让说明 -->
			<view v-if="type == 3" class="transfer">
				<text class="title">{{ $t('转让说明') }}</text>
				<view class="info">
					<view class="text">{{ houseDetail.transfer_desc }}</view>
				</view>
			</view>
		</div>
		<div class="bottom" v-if="houseDetail.add_type == 1">
			<div class="callPhone " @click="phoneShow(1)">
				<image src="/static/icons/phone.png" alt="" />
				<div class="text">{{ $t('联系平台') }}</div>
			</div>

			<u-button @click="phoneShow(2)" style="margin: 0 80rpx;flex:1 ;" size="medium" type="primary">{{
				$t('联系业务员')
			}}
			</u-button>

		</div>
		<div class="bottom" v-else>
			<div class="callPhone " @click="phoneShow(1)">
				<image src="/static/icons/phone.png" alt="" />
				<div class="text">{{ $t('联系直营店') }}</div>
			</div>
			<u-button @click="phoneShow(2)" style="margin: 0 80rpx;flex:1 ;" size="medium" type="primary">{{
				$t('联系房主')
			}}
			</u-button>
		
		</div>
		<!-- 拨打电话弹窗 -->
		<u-popup v-model="telShow1" mode="bottom">
			<view class="telModel">
				<div class="title">{{ $t('拨打电话') }}</div>
				<div class="item" @tap="telephone(houseDetail.release_info.store_account)">{{ $t('呼叫') }} {{
					houseDetail.release_info.store_account
				}}</div>
				<div class="item" @tap="telShow1 = false">{{ $t('取消') }}</div>
			</view>
		</u-popup>
		<!-- 联系平台 -->
		<u-popup v-model="telShow2" mode="bottom">
			<view class="telModel">
				<div class="title">{{ $t('拨打电话') }}</div>
				<div class="item" @tap="telephone(houseDetail.release_info.mobile)">{{ $t('呼叫') }} {{
					houseDetail.release_info.mobile
				}}</div>
				<div class="item" @tap="telShow2 = false">{{ $t('取消') }}</div>
			</view>
		</u-popup>
		<!-- 提示弹窗 -->
		<u-popup v-model="modalShow" mode="center" border-radius="20" :mask-close-able="false">
			<div class="model">
				<div class="closure" @click="closure">
					<image src="/static/icons/closure.png" alt="" />
				</div>

				<div class="title">提示</div>
				<div class="item">
					<image src="/static/icons/one.png" alt="" />

					<div class="text">
						请您支付费用(
						<span style="color: red;">{{ price }}</span>
						),即可查看一次
					</div>
				</div>
				<div class="item">
					<div class="left">
						<image src="/static/icons/two.png" alt="" />
					</div>

					<div class="text">成为会员，可查看所有土地内转让 的详情</div>
				</div>
				<div class="btns">
					<u-button :custom-style="customStyle1" class="btn btn1" @click="buyCheckFrequency">支付费用</u-button>
					<u-button :custom-style="customStyle2" class="btn btn2" @click="goBuyVip">成为会员</u-button>
				</div>
			</div>
		</u-popup>
		<!-- 支付成功弹窗 -->
		<!-- <Modal :modalShow="modalShow" @determine="goBuyVip" :content="content" @cancel="buyCheckFrequency" :contentStyle="contentStyle"
			:slotContent="content" :cancelText="'支付费用'" :confirmText="'成为会员'" /> -->

		<release-btn bottom="200"></release-btn>
	</view>
</template>

<script>
	import Modal from '@/components/Modal';
	import ReleaseBtn from '@/components/ReleaseBtn';
	import {
		copy,
		makePhoneCall,
		saveFile
	} from '@/common/utils/index';
	export default {
		name: 'sortdetail',
		components: {
			Modal,
			ReleaseBtn
		},
		data() {
			return {
				changShow: true,
				type: 0,
				isVip: 0, // 1会员 0非会员
				id: '',
				houseDetail: {
					imgs_paths: [],
					video_path: [],
					release_info: {},
					video_cover_path: []
				},
				// 弹窗内容
				price: '',
				// content: ,
				contentStyle: {
					color: '#666666',
					fontSize: '28rpx',
					padding: '30rpx',
					marginTop: '50rpx'
				},
				modalShow: false,
				//电话
				telShow1: false,
				telShow2: false,
				isActive: 1, // 0照片 1视频
				video_cover: '',
				customStyle1: {
					background: '#0089FF',
					color: '#ffffff'
				},
				customStyle2: {
					background: '#BFA78D',
					color: '#ffffff'
				},
				xcx_is_audit:0
			};
		},
		onLoad(options) {
			this.id = options.id;
			uni.setNavigationBarTitle({
				title: options.name
			});
		},
		onShow() {
			this.getDetail();
		},
		onReady(res) {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		methods: {
			//图片预览
			imageSelect(images) {
				uni.previewImage({
					urls: images, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: images[0], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					omplete: function(res) {},
				})
			},
			phoneShow(type) {
				if (type === 1) {
					this.telShow1 = true
				} else {
					this.telShow2 = true
				}
			},
			getDetail() {
				this.$u.api.detail({
					id: this.id
				}).then(res => {
					if (res.code === 2) {
						this.modalShow = true;
						this.price = res.data.single_price;
					}
					this.type = res.data.data.type;
					this.houseDetail = res.data.data;
					this.houseDetail.imgs_paths = res.data.data.imgs_path.reduce((e, i) => {
						{
							e.push({
								image: i
							});
						}
						return e;
					}, []);
					// #ifdef APP-PLUS
					if (!this.houseDetail.video_path) {
						this.isActive = 0
					}
					// #endif
					this.video_cover = res.data.data.video_cover_path[0]
				});
			},
			// 关注取消关注
			attention(member_id) {
				this.$u.api.follow({
					member_id
				}).then(res => {
					if (res.code === 1) {
						this.getDetail();
					}
				});
			},
			// 切换照片视频
			changePhotoVideo(index) {
				this.isActive = index
				this.videoContext.pause(); //暂停播放
			},
			play() {
				console.log('播放');
				this.changShow = false
			},
			pause() {
				console.log('暂停');
				this.changShow = true
			},

			// 播放失败文字
			// videoErrorCallback: function (e) {
			// 	uni.showModal({
			// 		content: e.target.errMsg,
			// 		showCancel: false
			// 	});
			// },
			// 获取用户vip信息
			getUserInfo() {
				this.$u.api.material().then(res => {
					this.isVip = res.data.data.is_vip;
					this.isVip === 0 ? (this.modalShow = true) : (this.modalShow = false);
				});
			},
			copyAddress(value) {
				copy(value);
			},
			//下载房产文件
			downloadUpload(file) {

				const files = this.houseDetail[file];
				if (this.houseDetail[file]) {
					uni.showToast({
						title: '努力加载中...',
						duration: 800,
						icon: "loading",
						success: res => {
							//下载并打开
							saveFile(files);
						}
					});
				} else {
					this.$u.toast('没有找到文件')
				}


			},
			// 购买次数
			buyCheckFrequency() {
				this.$u.api.single_view().then(res => {
					if (res.code === 1) {
						const {
							need_pay_money,
							order_sn,
							target
						} = res.data;
						let order = {
							target: order_sn,
							target_type: target,
							tradepwd: '111111',
							pay_type: 'deposit',
							money: need_pay_money
						};
						uni.navigateTo({
							url: '/pages/pay/index',
							success: res => {
								res.eventChannel.emit('orderInfo', {
									order
								});
							}
						});
					}
				});
			},
			// 拨打
			telephone(tel) {
				makePhoneCall(tel);
			},
			// 返回
			closure() {
				uni.navigateBack({
					delta: 1
				});
			},
			goContact() {
				this.$u.route('/pages/home/sortInfo/sortDetail/contact');
			},
			goCallPhone() {
				this.$u.route('/pages/home/sortInfo/sortDetail/callPhone');
			},
			goBuyVip() {
				this.$u.route('/pages/mine/vipCenter/index');
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.sortDetail {
		padding-bottom: 100rpx;
		margin-bottom: 20rpx;
		overflow: auto;
		background-color: #f8f8f8;
		height: calc(100vh - 120rpx);
	}

	.photoVideo {
		position: relative;
		width: 100%;
		height: 380rpx;

		video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 380rpx;
		}

		.return {
			color: #fff;
			position: absolute;
			top: 55rpx;
			left: 25rpx;
			z-index: 999;
		}


	}

	.change {
		width: 600rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		border-radius: 20rpx;
		@include flex($justify: space-between);

		.item {
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			width: 50%;
			height: 70rpx;
			background: #fff;
			border-radius: 10rpx;
			color: #232323;
			transition: all 0.5s ease;
		}

		.active {
			background: #0089ff;
			color: #fff;
		}

		.active2 {
			bottom: -50rpx;
		}
	}

	.content {
		margin: 20rpx 20rpx 100rpx;
		/* #ifdef APP */
		margin: 0rpx 20rpx 100rpx;

		/* #endif */
		.productInfo {
			border-radius: 20rpx;
			padding: 24rpx 20rpx;
			background-color: #fff;

			.title {
				margin-bottom: 20rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: $homeBlack;
			}

			.price {
				font-size: 22rpx;
				color: $priceColor;

				.num {
					font-weight: bold;
					font-size: 36rpx;
				}
			}
		}

		.releasePeople {
			// @include flex($justify: space-between, $aligin: center);
			background-color: #fff;
			margin: 20rpx 0;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;

			.top {
				margin-bottom: 30rpx;
				@include flex($aligin: center);

				image {
					margin-right: 12rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.conent {
				@include flex($justify: space-between, $aligin: center);

				.left {
					// flex: 1;
					@include flex($aligin: center);

					image {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
					}

					.info {
						margin-left: 20rpx;
						font-weight: 700;
						color: $homeBlack;

						.title {
							@include flex;

							.name {
								font-size: 26rpx;
							}

							.identify {
								text-align: center;
								line-height: 36rpx;
								margin-left: 12rpx;
								font-size: 20rpx;
								padding: 0 10rpx;
								height: 36rpx;
								background: #ffe646;
								border-radius: 8rpx 8rpx 8rpx 0rpx;
							}
						}

						.time {
							margin-top: 10rpx;
							font-size: 23rpx;
							color: #999999;
							font-weight: normal;
						}
					}
				}
			}
		}

		.productDetail {
			margin-top: 20rpx;
			border-radius: 20rpx;
			padding: 26rpx 20rpx 0;
			background-color: #fff;

			.item {
				padding-bottom: 32rpx;
				@include flex($aligin: center);
				font-size: 28rpx;

				.title {
					font-weight: 500;
					color: #999999;
				}

				.info {
					flex: 1;
					margin-left: 60rpx;
					color: $homeBlack;
				}
			}
		}

		.document {
			margin-top: 20rpx;
			border-radius: 20rpx;
			padding: 24rpx 20rpx;
			background-color: #fff;

			.title {
				position: relative;
				font-size: 28rpx;
				color: $homeBlack;
				font-weight: bold;
				z-index: 10;

				&::before {
					@include yellowDecorate;
				}
			}

			.list {
				margin-top: 20rpx;
				@include flex($aligin: center, $justify: space-between);

				.item {
					@include flex($aligin: center, $justify: center);
					width: 49%;
					height: 130rpx;
					background: #faf9f9;
					border-radius: 20rpx;

					.text {
						color: #232323;
						font-weight: 500;
						font-size: 28rpx;
					}
				}
			}
		}

		.transfer {
			padding: 22rpx 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.title {
				position: relative;
				font-size: 28rpx;
				color: $homeBlack;
				font-weight: bold;
				z-index: 10;

				&::before {
					@include yellowDecorate;
				}
			}
			.info {
				margin-top: 18rpx;
			}
			.text {
				line-height: 44rpx;
				font-size: 26rpx;
				color: #666666;
			}
		}
	}

	.bottom {
		@include flex($aligin: center);
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 40rpx;
		background: #ffffff;
		box-shadow: 0 -12rpx 10rpx 0 rgba(0, 0, 0, 0.03);
		z-index: 999;

		.callPhone {


			@include flex($aligin: center);
			flex-direction: column;


			image {
				width: 46rpx;
				height: 46rpx;
			}

			.text {


				font-size: 24rpx;
				color: $homeBlack;
				margin-top: 10rpx;
			}
		}
	}

	.telModel {
		height: 400rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.title {
			margin: 30rpx 0 50rpx;
			text-align: center;
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.item {
			font-size: 30rpx;
			color: #666666;
			margin: 30rpx 20rpx;
			@include flex($aligin: center, $justify: center);
			height: 100rpx;
			background: #f8f8f8;
			border-radius: 20px;
		}
	}

	.model {
		position: relative;
		padding: 28rpx 24rpx 38rpx;

		.closure {
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			z-index: 99999;

			image {
				width: 62rpx;
				height: 62rpx;
			}
		}

		.title {
			font-size: 32rpx;
			color: #232323;
			margin-bottom: 32rpx;
			font-weight: bold;
			text-align: center;
		}

		image {
			width: 48rpx;
			height: 30rpx;
		}

		.item {
			margin-bottom: 30rpx;
			@include flex($aligin: center);

			.text {
				margin-left: 20rpx;
				color: #666666;
				font-size: 28rpx;
			}
		}

		.btns {

			@include flex;
			justify-content: space-between;
			margin: 0 30rpx;

			.btn {
				width: 200rpx;
				height: 68rpx;
				color: #fff;
			}

			.btn1 {
				background: #0089FF;
			}

			.btn2 {
				background: #BFA78D;
			}
		}
	}
</style>